<template>
  <div class="majority"> <!--与tabbar一级的-->
    <div class="operator">
      <el-input v-model="input" style="width: 240px;height: 34px;margin: 0 20px 0 20px" placeholder="Please input" />
      <el-button type="success" :icon="Search">查询</el-button>
    </div>
    <div class="tableList">
      <el-table
          stripe
          border
          ref="multipleTableRef"
          :data="currentTableData"
          style="width: 100%;margin-left: 20px"
          @selection-change="handleSelectionChange"
      >
        <!--          选项改变时触发函数-->
        <el-table-column type="selection" width="55" />
        <el-table-column property="reserveId" label="id"  />
        <el-table-column property="coId" label="课程id"  />
        <el-table-column property="reserveTime" label="预约时间"  :fromatter="formatData"/>
        <el-table-column property="reserveFinish" label="完成状态"  >
          <template #default="scope">
            <label v-if="scope.row.reserveAccept==='0'">未完成</label>
            <label v-if="scope.row.reserveAccept==='1'">已完成</label>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :small="false"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="totalItems"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {Search,Plus,Delete} from "@element-plus/icons-vue";
</script>
<script>
import {ref} from "vue";
import request from "@/util/request";
export default {
  name: "MyFinishCourse",
  data(){
    return{
      input:ref(""),
      tableData:[],
      currentTableData:[],
      totalItems:ref(1),
      currentPage:ref(),
      pageSize:ref(10),
    }
  },
  methods:{
    formatData(cellValue){
      var s =	new Date(cellValue).toLocaleString();
      return s;
    },
    getData(){
      let coId=this.$route.query.coId
      request.post("/api/reservation/getallWithFinish1?coId="+coId).then(res=>{
        console.log(res)
        this.tableData=res
        this.currentPage=1
        this.totalItems=this.tableData.length
        this.currentTableData = this.tableData.filter((item, index) => index < this.pageSize)
      })

    },
    handleSelectionChange(val){
      console.log("选择的值为：")
      console.log(val)
    },
    handleEdit(row){

    },
    handleDelete(row){

    },
    handleCurrentChange(page){
      this.currentPage.value=page
      const index = this.pageSize * (page - 1)
      const nums = this.pageSize * page
      const tables = []
      for (let i = index; i < nums; i++) {
        if (this.tableData.value[i]) tables.push(this.tableData.value[i])  //看看这里
      }
      this.currentTableData.value = tables
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.majority{
  width: 100%;
  height: 80vh;
}
.operator{
  display: flex;
  width: 100%;
  height: 10vh;
}
.tableList{
  width: 100%;
  height: 60vh;
}
.demo-pagination-block{
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>